<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div th:include="back/common/cssjs :: main"></div>

<div class="container">
    <div class="mt-3">
        <h3 class="text-center">商品列表</h3>
        <table id="product_table" class="table table-bordered">
            <tr>
                <th>ID</th>
                <th>商品名</th>
                <th>价格</th>
                <th>操作</th>
            </tr>
        </table>
    </div>
</div>

<script>
    //超时
    window.setTimeout(function () {
        $.ajax({
            url: "getData",
            dataType: "json",
            success: function (result) {
                console.log(result);
                if (result.code == 0) {
                    var data = result.data; //data属性是 商品集合
                    //将data填充到表格中
                    for (var index in data) {
                        var s = "<tr><td>" + data[index].id + "</td><td>" + data[index].name + "</td><td>" + data[index].price + "</td>";
                        //把s添加到 table的最后面
                        $("#product_table").append(s);
                    }
                } else if (result.code != 0) {
                    alert("出错了：" + "code=" + result.code + "，信息=" + result.message);
                }

            }
        });
    }, 3000);
</script>
</body>
</html>